<template>
  <!-- 头部粘性布局 -->
  <van-sticky>
    <div class="header">
      <div class="title">理工严选</div>
    </div>
    <van-tabs v-model="active">
      <van-tab
        v-for="(n, index) in tabLists"
        :title="n.title"
        :key="index"
        :to="'/list' + index"
      >
      </van-tab>
    </van-tabs>
  </van-sticky>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabLists: [
        { title: "推荐", a: 0 },
        { title: "居家生活", a: 1 },
        { title: "服饰鞋包", a: 2 },
        { title: "美食酒水", a: 3 },
        { title: "个人清洁", a: 4 },
        { title: "母婴亲子", a: 5 },
        { title: "运动旅行", a: 6 },
        { title: "数码家电", a: 7 },
        { title: "宠物生活", a: 8 },
      ],
    };
  },
  methods: {},
  mounted() {
    this.active = this.$route.meta.active; // bug1：刷新页面，tab跟页面不对应
  },
  watch: {
    // bug2：点击返回按钮，tab跟页面不对应
    $route: function (newval, oldval) {
      this.active = newval.meta.active;
    },
  },
};
</script>

<style>
.header {
  height: 1rem;
  background: linear-gradient(rgb(113, 152, 231), rgb(156, 173, 197));
  color: white;
  text-align: center;
  line-height: 1rem;
  font-size: 0.8rem;
  font-family: "Times New Roman", Times, serif;
}
.van-tab {
  font-size: 0.4rem !important;
}
</style>